<template>
	<view class="container">
		<SafeAreaContainer
			:isIgnoreMiniNavBar="true"
			:ignoreSafeAreaTop="true"
			:ignoreSafeAreaBottom="false"
		>
			<view
				:style="{
					paddingTop: offsetTop * 2 + 'rpx',
					paddingBottom: offsetBottom * 2 + 'rpx',
					paddingLeft: offsetLeft * 2 + 'rpx',
					paddingRight: offsetRight * 2 + 'rpx',
				}"
			>
				<slot></slot>
			</view>
		</SafeAreaContainer>
	</view>
</template>

<script>
import SafeAreaContainer from '@/components/SafeAreaContainer/SafeAreaContainer.vue';
export default {
	components: { SafeAreaContainer },
	name: 'SafeAreaBotBar',
	props: {
		// 顶部安全区偏移(组件), 要和 SafeAreaContent 组件的 offsetTop 属性一致
		offsetTop: {
			type: [Number, String],
			default: 0,
		},
		// 底部安全区偏移, 要和 SafeAreaContent 组件的 offsetBottom 属性一致
		offsetBottom: {
			type: [Number, String],
			default: 0,
		},
		// 左侧安全区偏移, 要和 SafeAreaContent 组件的 offsetLeft 属性一致
		offsetLeft: {
			type: [Number, String],
			default: 0,
		},
		// 右侧安全区偏移, 要和 SafeAreaContent 组件的 offsetRight 属性一致
		offsetRight: {
			type: [Number, String],
			default: 0,
		},
	},
	computed: {},
	methods: {},
};
</script>

<style lang="scss" scoped>
.container {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
	width: 100%;
}
</style>
